<style lang="less" scoped>
@import "../assets/css/config.less";
*{
  margin: 0;
}
.flex-row{
  display: flex;
  justify-content: start;
}
.flex-space-between{
  display: flex;
  justify-content: space-between;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
.page {
  width: 970px;
  padding: 30px 20px;
  margin: 0 auto;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.question_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0 30px;
}

.ques_content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  padding: 0 20px;
  justify-content: center;
  align-items: flex-start;
}

.edit_out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.left {
  text-align: left;
}
.box-card{
  width: 100%;
  // padding: 0 20%;
}
.code-title{
  font-size: 16px;
  font-weight: 600;
}
.code-demo-title{
  margin: 5px 0 0;
  font-size: 14px;
  text-align: left;
}
.code-body{
  text-align: left;
  font-size: 14px;
}
.clearfix{
  display: flex;
  justify-content: space-between;
}
.look{
  text-align: right;
  font-size: 14px;
  margin-top: 10px;
  margin-right: 5px;
  a{
    color: @color1;
    &:hover{
      color: @color2;
    }
  }
}
.button{
  margin-top: 15px;
  border: 1px solid @color1;
  outline: none;
  width: 80px;
  line-height: 32px;
  background-color: @color1;
  color: @white;
  font-size: 14px;
  border-radius: 4px;
  &:hover{
    background-color: @color2;
    color: @white;
  }
  &:active{
    background-color: @color3;
    color: @white;
  }
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 100;
}
.secondary-navigation{
  top: 58px;
  left: 0;
  right: 0;
  background-color: @white;
  position: fixed;
  z-index: 90;
  padding: 5px 15px ;
  margin: 0 0 30px;
  border-bottom: 1px solid #F2F2F2;
  .item{
    cursor: default;
    margin: 0;
    .text{
      position: relative;
      font-size: 15px;
      padding: 0 15px;
      margin: 10px 0;
      border-right: 2px solid #F2F2F2;
      .active{
        color: @color2;
        &::after{
          content:'';
          // position: absolute;
          float: left;
          bottom: 0;
          border-bottom: 5px solid @color2;
          width: 100%;
          transform: translateY(10px);
        }
      }
    }
    &:hover{
      color: @color2;
    }
  }
  transition: top 0.3s;
}
.delete{
  color: @color1;
  font-size: 14px;
  cursor: pointer;
}
</style>

<template>
  <div id="index">
    <div  class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}">
        <div style="padding: 66px 6px 20px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <template>
          <div class="flex-row secondary-navigation" :style="showNavigation ? 'top:58px' : 'top:-5px'">
            <div 
              class="item"
              v-for="(item ,index) in itemlist" 
              :key="index"
              @click="handleClick(item.value, index)"
              >
              <div class="text">
                <p :class="activeitem===item.value?'active':''">{{ item.title}}</p>
              </div>
            </div>
          </div>
          <div v-if="activeitem==='ques'" class="question_list">
            <div v-if="questions.length === 0 && attachedQuestion.length === 0">
              <h3>你还没有收藏题目,快去“教程”中做题收藏吧~</h3>
              <button class="button" @click="toLesson">去教程</button>
            </div>
            <div v-for="(ques,index) in attachedQuestion" class="card_row">
              <Card style="width: 100%; margin-bottom: 20px">
                <div class="ques_content">
                  <div class="left" v-html="ques.practice.question_editor_Content"></div>
                  <Divider />
                  <div v-if="ques.practice.type === 'panduan'">
                    <strong>答案：</strong>
                    <p v-if="ques.practice.answer === 'yes'">正确</p>
                    <p v-if="ques.practice.answer === 'no'">错误</p>
                  </div>
                  <div class="xuanxiang" v-if="ques.practice.type === 'xuanze'">
                    <div v-for="(item, index) in ques.practice.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                      </div>
                  </div>
                  <div v-if="ques.practice.type === 'xuanze'">
                    <strong>答案：</strong>
                    <p v-for="ans in ques.practice.answer">
                      <span v-if="ans === '1'">A</span>
                      <span v-if="ans === '2'">B</span>
                      <span v-if="ans === '3'">C</span>
                      <span v-if="ans === '4'">D</span>
                      <span v-if="ans === '5'">E</span>
                      <span v-if="ans === '6'">F</span>
                      <span v-if="ans === '7'">G</span>
                      <span v-if="ans === '8'">H</span>
                      <span v-if="ans === '9'">I</span>
                      <span v-if="ans === '10'">G</span>
                      </p>
                  </div>
                  <div v-if="ques.practice.type === 'jianda'">
                    <strong>答案：</strong>
                    <span>言之有理即可</span>
                  </div>
                  <Divider />
                  <div class="left" v-if="ques.practice.illustrationContent !== ''">
                    <strong>答案解析：</strong>
                  <div class="left" v-html="ques.practice.illustrationContent"></div>
                  </div>
                </div>
              </Card>
            </div>
            <div v-for="(ques,index) in questions" class="card_row">
              <Card style="width:100%;margin-bottom: 20px">
                <div class="ques_content">
                  <div class="left" v-html="ques.question"></div>
                  <Divider />
                  <div v-if="ques.type === 'panduan'">
                    <strong>答案：</strong>
                    <p v-if="ques.answer[0] === 'yes'">正确</p>
                    <p v-if="ques.answer[0] === 'no'">错误</p>
                  </div>
                  <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                    <div v-for="(item, index) in ques.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                      </div>
                  </div>
                  <div v-if="ques.type === 'xuanze'">
                    <strong>答案：</strong>
                    <p v-for="ans in ques.answer">
                      <span v-if="ans === '1'">A</span>
                      <span v-if="ans === '2'">B</span>
                      <span v-if="ans === '3'">C</span>
                      <span v-if="ans === '4'">D</span>
                      <span v-if="ans === '5'">E</span>
                      <span v-if="ans === '6'">F</span>
                      <span v-if="ans === '7'">G</span>
                      <span v-if="ans === '8'">H</span>
                      <span v-if="ans === '9'">I</span>
                      <span v-if="ans === '10'">G</span>
                    </p>
                  </div>
                  <div v-if="ques.type === 'jianda'">
                    <strong>答案：</strong>
                    <span>言之有理即可</span>
                  </div>
                  <Divider />
                  <div class="left" v-if="ques.illustrationContent !== ''">
                    <strong>答案解析：</strong>
                  <div class="left" v-html="ques.illustrationContent"></div>
                  </div>
                </div>
              </Card>
            </div>
          </div>
          <div v-if="activeitem==='code'" style="margin: 0px 0 30px">
            <div v-if="codeList.length === 0">
              <h3>你还没有收藏代码,先去“教程”或“案例”界面选择代码进行练习和收藏吧～</h3>
              <button class="button" @click="toLesson">去教程</button>
              <button class="button" @click="toDemo">去案例</button>
            </div>
            <div class="card_row" style="margin-bottom: 20px" v-for="(item, index) in codeList" :key="index">
              <el-card class="box-card" @click.native="code_compared(item.collection._id)">
                <div slot="header" class="clearfix">
                  <div style="width: 100%" class="flex-space-between" v-if="item.type==='demo'">
                    <span class="code-title">
                        <span>{{ item.collection.title }}</span>
                    </span>
                    <p class="delete" style="padding: 3px 0" @click.stop="del(item.collection._id)" type="text">删除</p>
                  </div>
                  <div style="width: 100%" v-if="item.type==='point'">
                    <div class="flex-space-between">
                      <span class="code-title">
                        <div>
                          <span>{{ item.menuTitle }}</span>
                          <span>{{ item.menuSubtitle }}——</span>
                          <span>{{ item.title }}</span>
                        </div>
                      </span>
                      <p class="delete" style="padding: 3px 0" @click.stop="del(item.collection._id)" type="text">删除</p>
                    </div>
                    <div class="code-demo-title">{{ item.collection.title }}</div>
                  </div>
                </div>
                <div class="code-body">
                  <!-- <div>层级：</div> -->
                  <!-- <span v-if="item.type==='point'">练习：{{item.collection.hint}}</span> -->
                  <div>收藏描述：{{ item.collection.des }}</div>
                </div>
                <div class="look">
                  <a><i class="el-icon-view el-icon--right"></i> 查看代码</a>
                </div>
              </el-card>
            </div>
          </div>
        </template>
        
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import myBreadcrumb from "../components/myBreadcrumb.vue";
import { getCollectedQuestion, get_allCodeCollection, del_codeCollection } from "../api/api";
import { debounce } from "../utils/debounce"
export default {
  name: "questions",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      menu: [],
      questions: [],
      attachedQuestion: [],
      section: "",
      userGroup: "",
      codeList: [],
      activebar: 'transform: translateX(0px);',
      activeitem: 'ques',
      itemlist: [
        {
          value: 'ques',
          title: '题目收藏'
        }, {
          value: 'code',
          title: '代码收藏'
        }
      ],
      breadcrumbList: [
        {
          name: "首页",
          blod: true,
          to: "index",
        }, {
          name: "我的收藏",
        },  {
          name: "题目收藏",
        },
      ],
      showNavigation: true,
      lastScrollTop: 0
    };
  },
  mounted() {
    let that =this;
    window.addEventListener('scroll', debounce(function(e){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop>that.lastScrollTop){
        that.showNavigation = false
      } else {
        that.showNavigation = true
      }
      that.lastScrollTop = scrollTop
    }, 50, false))

    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    getCollectedQuestion({ UUID: sessionStorage.UUID })
    .then(response => {
      if (response.state === true) {
        this.questions = response.result.extraQuestion;
        this.attachedQuestion = response.result.attachedQuestion;
      } else {
        this.$Message.error(response.msg);
      }
    })
    .catch(error => {
      this.$Message.error(error.status);
    });
    get_allCodeCollection({ UUID: sessionStorage.UUID })
    .then(response => {
      if (response.state === true) {
        this.codeList = response.msg;
        // console.log(response)
      } else {
        this.$Message.error(response.msg);
      }
    })
    .catch(error => {
      this.$Message.error(error.status);
    });
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    handleClick(value, index){
      this.activeitem = value;
      this.activebar = `transform: translateX(${index*96}px);`
    },
    toLesson(){
      this.$router.push({
        name: "index",
        params: {
          menu: "js,0,0"
        }
      });
    },
    toDemo(){
      this.$router.push({
        name: "demoPractise"
      });
    },
    del(id){
      this.$confirm('此操作将永久删除该条收藏, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del_codeCollection({
          id: id
        }).then(response => {
          if (response.state === true) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            return get_allCodeCollection({ UUID: sessionStorage.UUID })
          } else {
            this.$Message.error(response.msg);
          }
        }).then(response => {
          if (response.state === true) {
            this.codeList = response.msg;
          } else {
            this.$Message.error(response.msg);
          }
        })
        .catch(error => {
          this.$Message.error(error.status);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
      
    },
    code_compared(id){
      sessionStorage.setItem("codeComparedId", id);
      this.$router.push({
        name: "Compared"
      })
    }
  }

};

</script>